<template>
    <div class="home">
      <book-search class="search"></book-search>
      <div class="personCenter">
        <el-button @click="toPersonCenter" >个人中心</el-button>
      </div>
      <div class="log">
        <el-button @click="ToLogout" v-if="role!==''&&role!==null&&role!==undefined">注销</el-button>
        <el-button  @click="ToLogin" v-else>登录  |  注册</el-button>
      </div>
      <classification></classification>
    </div>
</template>

<script>
  import bookSearch from "../../components/bookSearch/bookSearch"
  import classification from './classification'
  import Pages from "../../components/pages/Pages"
  import {GetTestInfo } from "../../api/test"
  import {GetHome} from "../../api/home"
  import {getRole} from "../../utils/cacheProcessing";
  import { removeAccessToken,removeRole,removeuserName,getuserName } from "../../utils/cacheProcessing"
    export default {
      name: "home",
      components:{
        bookSearch,
        classification,
        Pages
      },
      data(){
        return{
          // pageNum:1,
          // type:"情感",
            role:getRole()
        }
      },
      created(){
        console.log(getRole());
      },
      mounted() {
        let _this = this;
        document.addEventListener('click',function (){
          // console.log('123');
          // console.log(_this.$refs);
        })
      },
      methods:{
        ToLogin(){
          this.$router.push('/login')
        },
          ToLogout(){
              this.confirm({
                  content: "此操作将注销当前登录用户，是否继续?",
                  fn: ()=>{
                      console.log("hi")
                      removeAccessToken()
                      removeRole()
                      removeuserName()
                      this.$router.push('/login')
                  },
                  catchfn: () => {
                  }
              });

          },
        toAdmin(){
          this.$router.push('/administrator')
        },
        toPersonCenter(){
          this.$router.push('/user')
        },
        getHome(val){
          if(!val) val = 1
          console.log("type=" + this.type);
          console.log("pageNum=" + val);
          let requestData = {
            pageNum:parseInt(val),
            type: this.type
          }
          GetHome(requestData).then(res=>{

          }).catch(err=>{

          })

        },
        test(){
          let requestData = {
            bookName:"三国演义",
            pageNum:1
          }
          GetTestInfo(requestData).then(res=>{
            console.log(res);
          }).catch(err=>{})
        }
      }

    }
</script>

<style lang="scss" scoped>
.home {
  position：relative,
  .classification{
    margin-left: 22%;
    margin-top: 100px;
  }
  .log {
    position: absolute;
    right: 20px;
    top:20px;
  }
  .personCenter{
    position: absolute;
    left: 20px;
    top:20px;
  }
}
/*.home{
  background-color: black;
  height: 100vh;
}*/
</style>
